<template>
    <div
        class="easy-cell relative flex items-center f5 bg-white pa4"
        v-on="$listeners"
    >
        <div class="tl dark-gray flex-grow-1">
            <slot name="title">
                {{ title }}
            </slot>
        </div>
        <div class="silver">
            <slot name="value">
                {{ value }}
            </slot>
        </div>
        <div v-if="isLink" class="arrow flex-shrink-0 ml3"></div>
    </div>
</template>

<script>
export default {
    name: 'EasyCell',

    props: {
        title: {
            type: String,
            default: '',
        },

        value: {
            type: String,
            default: '',
        },

        label: {
            type: String,
            default: '',
        },

        isLink: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style scoped>
.easy-cell::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    border-top: 1px solid #f3f3f3;
}

.easy-cell:first-of-type:after {
    display: none;
}
</style>
